<template>
  <div class="app-container">
    <div class="header">
      <el-input style="width: 300px;" v-model="ordersListForm.mimo" size="mini" placeholder="输入关键字搜索"
        @change="ordersSearch" @input="checkVal">
        <i slot="suffix" class="el-icon-search"></i>
      </el-input>
    </div>
    <div class="content">
      <!-- 订单列表 -->
      <el-table :data="ordersList" style="width: 100%;" stripe
        :default-sort="{ prop: 'ordersTime', order: 'descending' }">
        <el-table-column label="订单信息">
          <el-table-column label="订单名字" prop="ordersName">

            <template slot-scope="scope">
              <div>{{ scope.row.ordersName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="订单价格" prop="ordersPrice">
            <template slot-scope="scope">
              <div>{{ scope.row.ordersPrice }}</div>
            </template>
          </el-table-column>
          <el-table-column label="订单备注" prop="ordersMessage">
            <template slot-scope="scope">
              <div>{{ scope.row.ordersMessage }}</div>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" sortable prop="ordersTime">

            <template slot-scope="scope">
              <div>{{ scope.row.ordersTime }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="订单状态">
          <el-table-column label="状态" prop="isDelete">
            <template slot-scope="scope">
              <el-tag effect="dark" :type="scope.row.isDelete == 0 ? '' : 'danger'" :hit="true">
                {{ scope.row.isDelete == 0 ? '未过期' : '已过期' }}
              </el-tag>
              <!-- <div>{{ scope.row.isDelete == 0 ? '未过期' : '已过期' }}</div> -->
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="ordersListSizeChange" @current-change="ordersListCurrentChange"
        :page-size="ordersListForm.size" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next"
        :total="ordersListTotal" style="margin-top: 20px;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import utils from '@/utils/checkLogin'
import { getOrdersList } from '../../api/api'
export default {
  data() {
    return {
      ordersList: [],
      ordersListForm: {
        mimo: '',
        size: 10,
        page: 1
      },
      ordersListTotal: null,
    }
  },
  methods: {
    getOrdersListData() {
      getOrdersList(this.ordersListForm).then((res) => {
        if (res.code == 200) {
          console.log('订单列表', res)
          this.ordersList = res.data
          this.ordersListTotal = res.total
        }
      })
    },
    ordersListSizeChange(e) {
      this.ordersListForm.size = e
      this.getOrdersListData()
    },
    ordersListCurrentChange(e) {
      this.ordersListForm.page = e
      this.getOrdersListData()
    },
    ordersSearch() {
      this.getOrdersListData()
    },
    checkVal() {
      if (this.ordersListForm.mimo == '') {
        this.getOrdersListData()
      }
    },
  },
  created() {
    utils.checkLogin()
    this.getOrdersListData()
  }
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 30px;

  .header {
    align-items: center;
    display: flex;
    margin-bottom: 20px;

    .el-icon-search {
      cursor: pointer;
      margin-right: 4px;
      margin-top: 8px;
    }

  }

  .content {
    text-align: center;
  }

  .customWidth {
    width: 75%;
  }

  @media (max-width: 768px) {
    .kub-mobileWidth {
      width: 98%;
    }
  }
}
</style>